<template>
  <h1>文本指令</h1>
  <h4>{{info}}</h4>
  <span>{{info+"，多练习"}}</span>
  <hr>
  <button @click="f">点一下</button>
  <p v-text="text"></p>
  <p>{{text}}</p> <!-- {{text}}是v-text="text"d的简写 效果等价 -->
  <p v-html="text"></p> <!-- v-text会将响应式变量的值原样绑定 而v-html会显示出响应式变量含有的标签效果 -->
  <p>{{i}}</p>
  <p v-html="i"></p>
</template>

<script setup>
  import {ref} from "vue";

  const info = ref("我是文本指令");
  const f = () => {
    console.log(info);
    alert(info.value);
  }
  const text = ref("我是<mark>文本指令带高亮</mark>")
  const i = ref("我是<i>文本指令带倾斜</i>")
</script>

<style scoped>

</style>